<!--<!DOCTYPE html>-->
<!--<html lang="en">-->

<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta content="IE=edge" http-equiv="X-UA-Compatible">-->
<!--    <meta content="width=device-width, initial-scale=1.0" name="viewport">-->
<!--    <title>Document</title>-->
<!--    <link href="https://at.alicdn.com/t/c/font_4156699_i9rfozb6ac.css" rel="stylesheet">-->
<!--    <style>-->
<!--        * {-->
<!--            margin: 0;-->
<!--            padding: 0;-->
<!--            box-sizing: border-box;-->
<!--        }-->

<!--        body {-->
<!--            width: 100vw;-->
<!--            height: 100vh;-->
<!--            background: linear-gradient(transparent, transparent, transparent);-->
<!--            display: flex;-->
<!--            justify-content: center;-->
<!--            align-items: center;-->
<!--        }-->


<!--        .searchBar {-->
<!--            width: 60px;-->
<!--            height: 60px;-->
<!--            background-color: #fff;-->
<!--            box-shadow: 0 0 10px rgba(0, 0, 0, .4);-->
<!--            border-radius: 60px;-->
<!--            position: relative;-->
<!--            overflow: hidden;-->
<!--            transition: .5s;-->
<!--        }-->

<!--        .icon {-->
<!--            width: 60px;-->
<!--            height: 60px;-->
<!--            display: flex;-->
<!--            justify-content: center;-->
<!--            align-items: center;-->
<!--            cursor: pointer;-->
<!--        }-->

<!--        .icon i {-->
<!--            color: dodgerblue;-->
<!--            font-size: 30px;-->
<!--        }-->

<!--        .textInput {-->
<!--            width: 320px;-->
<!--            height: 60px;-->
<!--            display: flex;-->
<!--            justify-content: center;-->
<!--            align-items: center;-->
<!--            background-color: #a61997;-->
<!--            position: absolute;-->
<!--            top: 0;-->
<!--            left: 60px;-->
<!--        }-->

<!--        .textInput input {-->
<!--            width: 100%;-->
<!--            height: 100%;-->
<!--            border: none;-->
<!--            outline: none;-->
<!--            font-size: 18px;-->
<!--        }-->

<!--        .clear {-->
<!--            width: 15px;-->
<!--            height: 15px;-->
<!--            position: absolute;-->
<!--            right: 22%;-->
<!--            top: 50%;-->
<!--            transform: translateY(-50%);-->
<!--            cursor: pointer;-->
<!--            display: flex;-->
<!--            justify-content: center;-->
<!--            align-items: center;-->
<!--        }-->

<!--        .clear i {-->
<!--            color: #999;-->
<!--        }-->

<!--        .goBtn {-->
<!--            width: 12%;-->
<!--            height: 60%;-->
<!--            position: absolute;-->
<!--            top: 20%;-->
<!--            right: 0;-->
<!--            border-radius: 8px;-->
<!--            outline: none;-->
<!--            border: none;-->
<!--            color: #fff;-->
<!--            box-shadow: 0 0 2px rgba(0, 0, 0, .4);-->
<!--            background: linear-gradient(#b500fd, #b910a2);-->
<!--            cursor: pointer;-->
<!--        }-->

<!--        .changeWidth {-->
<!--            width: 400px;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->

<!--<body>-->
<!--<form action="searchProduct" method="get">-->
<!--    <div class="searchBar">-->
<!--        <div class="icon"><i class="iconfont icon-sousuoxiao"></i></div>-->
<!--        <div class="textInput">-->
<!--            <input class="inp" placeholder="请输入搜索关键字" type="text" name="searchKeyword"> &lt;!&ndash; Added name attribute &ndash;&gt;-->
<!--            <button class="goBtn" type="submit">go</button> &lt;!&ndash; Added type attribute &ndash;&gt;-->
<!--            <div class="clear"><i class="iconfont icon-close"></i></div>-->
<!--        </div>-->
<!--    </div>-->
<!--</form>-->


<!--<script>-->
<!--    // 1. 获取元素-->
<!--    let searchIcon = document.querySelector(".icon")-->
<!--    let clearIcon = document.querySelector(".clear")-->
<!--    let searchBar = document.querySelector(".searchBar")-->
<!--    let inp = document.querySelector(".inp")-->

<!--    // 2. 点击，切换类 => 改宽实现展开-->
<!--    searchIcon.addEventListener("click", () => {-->
<!--        searchBar.classList.toggle("changeWidth")-->
<!--    })-->
<!--    // 3. 点击清空-->
<!--    clearIcon.addEventListener("click", () => {-->
<!--        inp.value = ""-->
<!--    })-->
<!--</script>-->
<!--</body>-->

<!--</html>-->